import React, { PureComponent } from 'react'
import { Routes, Route,Link,NavLink } from "react-router-dom";

import Home from "./pages/Home";
import About from './pages/About';
import Login from './pages/Login';
import NotFound from './pages/NotFound';
export class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <div className="header">
          <h1>App</h1>
          <div className="nav">
            <Link to='/'>首页</Link>
            <NavLink to='/about'>关于</NavLink>
            <Link to='/login'>登录</Link>
          </div>
        </div>
        <hr/>
        <div className="content">
          <Routes>
            <Route path="/"  element={<Home />} />
            <Route path="/home" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/login" element={<Login />} />
            <Route path="*" element={<NotFound/>} />
          </Routes>

        </div>
        <hr/>
        <div className="footer">
          <p>footer</p>
        </div>
      </div>
    )
  }
}

export default App